<template>
  <div class="page-order-order">
    <div class="search-bar">
      <el-form
        :inline="true"
        :model="searchForm"
        @submit.prevent
        @keyup.enter="getDataList(page)"
      >
        <div class="input-row">
          <el-form-item
            label="询价单号:"
            :label-width="'90px'"
          >
            <el-input
              v-model="searchForm.orderNo"
              placeholder="询价单号"
              clearable
            />
          </el-form-item>

          <el-form-item
            label="询价客户:"
            :label-width="'90px'"
          >
            <el-input
              v-model="searchForm.merchantName"
              placeholder="询价客户"
              clearable
            />
          </el-form-item>

          <el-form-item
            label="询价人:"
            :label-width="'90px'"
          >
            <el-input
              v-model="searchForm.createdBy"
              placeholder="询价人"
              clearable
            />
          </el-form-item>

          <el-form-item
            label="项目号"
            label-width="90px"
          >
            <el-input
              v-model="searchForm.projectNo"
              placeholder="项目号"
              clearable
            />
          </el-form-item>

          <el-form-item
            label="询价型号:"
            :label-width="'90px'"
          >
            <el-input
              v-model="searchForm.prodIds"
              placeholder="询价型号"
              clearable
            />
          </el-form-item>

          <el-form-item
            label="询价时间:"
            :label-width="'90px'"
          >
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              clearable
              :range-separator="$t('date.tip')"
              value-format="YYYY-MM-DD HH:mm:ss"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0),
                              new Date(2000, 2, 1, 23, 59, 59)]"
              :start-placeholder="$t('date.start')"
              :end-placeholder="$t('date.end')"
            />
          </el-form-item>

          <el-form-item>
            <div
              class="default-btn primary-btn"
              @click="onSearch(true)"
            >
              {{ $t("order.query") }}
            </div>

            <div
              class="default-btn"
              @click="clear()"
            >
              {{ $t("product.reset") }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="main">
      <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        @tab-change="handleClick"
      >
        <el-tab-pane
          label="全部"
          name="all"
        />
        <el-tab-pane
          label="报价中"
          name="5"
        />
        <el-tab-pane
          label="已报价"
          name="6"
        />
        <el-tab-pane
          label="已取消"
          name="8"
        />
        <el-tab-pane
          label="已过期"
          name="7"
        />
      </el-tabs>
      <!-- 操作按钮 -->
      <div class="operation-bar" />
      <!-- 表格 -->
      <div class="table-con prod-table">
        <el-table
          ref="prodListTableRef"
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row"
          style="width: 100%"
        >
          <el-table-column
            align="left"
            prop="orderNo"
            label="询价单号"
            show-overflow-tooltip
          />

          <el-table-column
            align="left"
            prop="prodNames"
            label="商品信息"
            min-width="150"
            show-overflow-tooltip
          >
            <template #default="scope">
              <el-button
                type="primary"
                link
                @click="onViewGoods(scope.row.orderNo)"
              >
                {{ scope.row.prodNames ? JSON.parse(scope.row.prodNames).join() : '' }}
              </el-button>
            </template>
          </el-table-column>

          <el-table-column
            align="left"
            prop="inquiryTime"
            label="询价时间"
            width="180"
            show-overflow-tooltip
          />

          <el-table-column
            align="left"
            prop="merchantName"
            label="询价客户"
            width="150"
            show-overflow-tooltip
          />

          <el-table-column
            align="left"
            prop="createdBy"
            label="询价人"
            width="130"
            show-overflow-tooltip
          />

          <el-table-column
            align="left"
            prop="projectNo"
            label="项目号"
            show-overflow-tooltip
          />

          <el-table-column
            align="left"
            prop="status"
            label="状态"
            width="100"
          >
            <template #default="scope">
              {{ statusList[scope.row.status] }}
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            align="center"
            :label="$t('publics.operating')"
            width="150"
          >
            <template #default="scope">
              <div class="text-btn-con">
                <div
                  class="default-btn text-btn"
                  @click="onView(scope.row)"
                >
                  查看
                </div>

                <div
                  v-if="scope.row.status == 5"
                  class="default-btn text-btn"
                  @click="onIquiry(scope.row)"
                >
                  取消询价
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination
        v-if="dataList.length"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="onPageSizeChange"
        @current-change="onPageChange"
      />
    </div>

    <el-dialog
      v-model="visible"
      :width="800"
      title="商品详情"
    >
      <el-table
        :data="goodList"
        style="width: 100%"
      >
        <el-table-column
          prop="shopName"
          label="品牌"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{ scope.row.shopName }}
          </template>
        </el-table-column>

        <el-table-column
          prop="prodName"
          label="商品名称"
          show-overflow-tooltip
          min-width="150"
        >
          <template #default="scope">
            {{ scope.row.prodName }}
          </template>
        </el-table-column>

        <el-table-column
          prop="skuCode"
          label="型号"
          min-width="150"
        >
          <template #default="scope">
            {{ scope.row.skuCode }}
          </template>
        </el-table-column>

        <el-table-column
          prop="number"
          label="数量"
          :width="100"
        >
          <template #default="scope">
            {{ scope.row.number || (scope.row.status == 5 && scope.row.invalidFlag != 1 ? '信息更新中' : '--') }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <el-pagination
        v-if="goodList.length"
        style="margin-top: 10px"
        :current-page="detailPage.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="detailPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="detailPage.total"
        @size-change="onPageSizeChangeD"
        @current-change="onPageChangeD"
      /> -->
    </el-dialog>
  </div>
</template>

<script setup>
import moment from 'moment'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { isAuth } from '@/utils'
import { statusList } from './eum.js'

const routerStore = useRouterStore()
const router = useRouter()

const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})
const { query } = useRoute()

const activeName = ref('all')
onMounted(() => {
  const parPage = useRoute().query.page
  const search = useRoute().query.search
  const status = useRoute().query.status
  if (search) {
    Object.assign(searchForm.value, JSON.parse(decodeURI(search)))
  }
  if (parPage) {
    const { total, currentPage, pageSize } = JSON.parse(decodeURI(parPage))
    page.total = total
    page.currentPage = currentPage
    page.pageSize = pageSize
  }
  activeName.value = status || 'all'
  getDataList(page, query)
})

const handleClick = (key) => {
  activeName.value = key
  onSearch(true)
}

const dateRange = ref([])
const searchForm = ref({})
let tempSearchForm = null // 保存上次点击查询的请求条件
let theParams = null // 保存上次点击查询的请求条件
const dataList = ref([])
/**
 * 获取数据列表
 */
const getDataList = (pageParam, newData = false) => {
  if (page) {
    const size = Math.ceil(page.total / page.pageSize)
    page.currentPage = (page.currentPage > size ? size : page.currentPage) || 1
  }
  // mysql 请求接口
  if (newData || !tempSearchForm) {
    theParams = JSON.parse(JSON.stringify(searchForm.value))
    tempSearchForm = {
      current: pageParam == null ? page.currentPage : pageParam.currentPage,
      size: pageParam == null ? page.pageSize : pageParam.pageSize,
      status: activeName.value == 'all' ? null : activeName.value,
      beginTime: dateRange.value === null ? null : dateRange.value[0], // 开始时间
      endTime: dateRange.value === null ? null : dateRange.value[1] // 结束时间
    }
  } else {
    tempSearchForm.current = pageParam == null ? page.currentPage : pageParam.currentPage
    tempSearchForm.size = pageParam == null ? page.pageSize : pageParam.pageSize
  }
  http({
    url: http.adornUrl('/shop/inquiryList/page'),
    method: 'get',
    params: http.adornParams(
      Object.assign(
        tempSearchForm,
        theParams
      )
    )
  }).then(({ data }) => {
    dataList.value = data.records
    page.total = data.total
    // 末尾页数据为空重新请求
    if (!dataList.value.length && page.currentPage > 1) {
      page.currentPage = 1
      getDataList()
    }
  })
}

/**
 * 每页数
 * @param val
 */
const onPageSizeChange = (val) => {
  page.pageSize = val
  page.currentPage = 1
  getDataList(page)
}

/**
 * 当前页
 * @param val
 */
const onPageChange = (val) => {
  page.currentPage = val
  getDataList(page)
}

/**
 * 清空按钮
 */
const clear = () => {
  searchForm.value = {}
  dateRange.value = []
}

/**
 * 搜索查询
 * @param newData
 */
const onSearch = (newData = false) => {
  page.currentPage = 1
  getDataList(page, newData)
}

const onView = (row) => {
  router.push({
    path: '/order/inquiry/detail',
    query: { id: row.id, orderNo: row.orderNo, status: activeName.value, page: encodeURI(JSON.stringify(page)), search: encodeURI(JSON.stringify(searchForm.value)) }
  })
}

const onIquiry = ({ orderNo }) => {
  ElMessageBox.confirm('确认取消询价吗?', '提示').then(() => {
    http({
      url: http.adornUrl('/shop/inquiryList/cancel'),
      method: 'put',
      data: http.adornData({
        orderNo
      })
      // params: http.adornParams({
      //   orderNo
      // })
    }).then(() => {
      ElMessage.success('操作成功')
      getDataList(page)
    })
  })
}

const detailPage = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})
const visible = ref(false)
const goodList = ref([])
const curOrderNo = ref('')
const onViewGoods = (orderNo) => {
  visible.value = true
  curOrderNo.value = orderNo
  getDetailList()
}
const getDetailList = (pageParam) => {
  const params = {
    orderNo: curOrderNo.value,
    current: pageParam == null ? detailPage.currentPage : pageParam.currentPage,
    size: pageParam == null ? detailPage.pageSize : pageParam.pageSize
  }
  http({
    url: http.adornUrl('/shop/inquiryList/getProdInfoByOrderNo'),
    method: 'get',
    params: http.adornParams(params)
  }).then(({ data }) => {
    goodList.value = data
    // goodList.value = data.records || []
    // detailPage.total = data.total
    // // 末尾页数据为空重新请求
    // if (!goodList.value.length && detailPage.currentPage > 1) {
    //   detailPage.currentPage = 1
    //   getDetailList()
    // }
  })
}

const onPageSizeChangeD = (val) => {
  detailPage.pageSize = val
  getDetailList()
}
const onPageChangeD = (val) => {
  detailPage.currentPage = val
  getDetailList()
}
</script>

<style lang="scss" scoped>
  // @use './index.scss';
</style>
